<template>
	<div>
		<van-nav-bar>
			<template #left>
				<div @click="showPopup"><van-icon name="location-o" />{{SelectCountyName}}</div>
				<!-- <router-link to="/city">成都市</router-link> -->
			</template>

			<template #title>
				<router-link to="/search">请输入关键字</router-link>
			</template>

			<template #right>
				<van-image
					v-if="useheaderimg"
					:src="useheaderimg"
					type="contain"
					round
					width="40px"
					height="40px"
					@click="router.push({path:'/my'})"/>
				<router-link to="/login" v-else >登录</router-link>
			</template>
		</van-nav-bar>
		<van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }" >
    <van-area
      title="标题"
      :area-list="areaList"
      :columns-placeholder="['请选择', '请选择', '请选择']"
      :columns-num="3"
      @cancel="cancel"
      @confirm="confirm"

    />
  </van-popup>
	</div>
</template>

<script setup lang="ts">
import { areaList } from "@vant/area-data";
import { ref } from "vue";
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import{onUpdated}from 'vue'
interface IUser {
	nick: string
	headerimg: string
}
const router = useRouter()

const usernick=localStorage.getItem('usernick')

const useheaderimg=localStorage.getItem('userheaderimg')

// const store = useUserStore()
// const user:IUser = store.userInfo
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const cancel = () => {
  show.value = false;
};
let SelectProvinceName =ref('')
let SelectCityName=ref('')
let SelectCountyName=ref('请定位')
const confirm = (event) => {
	show.value = false
	let arr
        arr = event;
        SelectProvinceName.value = arr[0].name;   // 省
        SelectCityName.value = arr[1].name;   // 市
        SelectCountyName.value = arr[2].name;  // 区
        console.log('点击了确定按钮',SelectProvinceName,SelectCityName,SelectCountyName)

}


</script>

<style lang="scss" scoped>
.van-nav-bar {
	font-weight: bold;
	background-color: #fff;
	border-radius: 8px;
	.van-nav-bar__left {
		div {
			color: #8097ff;
			font-size: 16px;
			padding-left: 0;
		}
	}
	:deep(.van-nav-bar__title) {
		border: 1px solid #8097ff;
		height: 28px;
		line-height: 28px;
		border-radius: 30px;
		box-sizing: border-box;
		max-width: 50%;
		flex: 1;
		text-align: center;
		color: #232326;
		a {
			color: #232326;
			font-size: 14px;
			opacity: 0.5;
		}
	}
	.van-nav-bar__right {
		a {
			color: #8097ff;
			font-size: 16px;
		}
	}
	.van-image{
		margin-left: 5px;
	}
}
</style>
